* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}

:root {
    --color-text: #303133;
    --color-query: #f56c6c;
    --font-size: 16px;
    --bg-color: #bfbfbf;
    --border-color: #cdd0d6;
    --border-color-light: #efefef;
    --border-color-dark: #969696;
}

html {
    font-family: Inter, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
        Arial, sans-serif;
    #app {
        background: #fff;
        color: var(--color-text);
        font-size: var(--font-size);

        --block-side: 28px;
        --border-radius: 4px;
        .block {
            width: var(--block-side);
            height: var(--block-side);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: var(--font-size);
            font-weight: 800;
            color: var(--block-text-color);
            &.unknow {
                background: var(--bg-color);
                &.active {
                    border-width: 2px;
                    border-style: solid;
                    border-left-color: var(--border-color-dark);
                    border-top-color: var(--border-color-dark);
                    border-right-color: var(--border-color-light);
                    border-bottom-color: var(--border-color-light);
                }
                &.mark {
                    &::before {
                        content: "";
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        width: 0;
                        height: 0;
                        border-width: 3px 0px 8px 12px;
                        border-style: solid;
                        border-color: transparent transparent transparent #e91919;
                        transform: translate(-50%, -50%);
                        // transform-origin: 0 50%;
                        // transform: rotate(45deg);
                    }
                    &::after {
                        content: "";
                        position: absolute;
                        top: 8px;
                        left: 6px;
                        width: 0;
                        height: 13px;
                        border-left: 2px solid #000;
                    }
                }
                &.mine {
                    &::before {
                        content: "";
                        position: absolute;
                        top: 52%;
                        left: 50%;
                        width: 65%;
                        height: 65%;
                        border-radius: 50%;
                        background: radial-gradient(circle at 40% 40%, #fff 0%, #fff 4%, #000 42%, #000 100%);
                        transform: translate(-50%, -50%);
                    }
                    &::after {
                        content: "";
                        position: absolute;
                        top: 15%;
                        left: 55%;
                        width: 2px;
                        height: 3px;
                        background: #e40202;
                        transform: translate(-50%, -50%) rotate(15deg);
                    }
                }
                &.query {
                    &::before {
                        content: "?";
                        position: absolute;
                        font-size: 12px;
                        font-weight: 900;
                        color: var(--color-query);
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }
            }
            &.boom {
                background: #ff0000;
            }
        }
        .border-container {
            border-width: 3px;
            border-style: solid;
            border-left-color: var(--border-color-dark);
            border-top-color: var(--border-color-dark);
            border-right-color: var(--border-color-light);
            border-bottom-color: var(--border-color-light);
        }
        .border-block {
            border-width: 2px;
            border-style: solid;
            border-left-color: var(--border-color-light);
            border-top-color: var(--border-color-light);
            border-right-color: var(--border-color-dark);
            border-bottom-color: var(--border-color-dark);
        }
    }
}
